<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<div class="layui-form-item">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">名称：</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name" class="layui-input">
                </div>
                <label class="layui-form-label" style="width: auto">预定时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="start" lay-verify="date" id="start" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="end" lay-verify="date" id="end" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button class="layui-btn" id="search-table-btn" type="button" >搜索</button>
        </div>

    </form>
</div>
<table id="dish-table" lay-filter="dish-table"></table>
<script type="text/html" id="toolbarDemo">
<button class="layui-btn" type="button" lay-event="add"><i class="layui-icon">&#xe654;</i>  添加</button>
<button class="layui-btn  layui-btn-danger" type="button" lay-event="delete"><i class="layui-icon">&#xe640;</i>  删除</button>
</script>
<script>
    layui.use(['table','form' ,'laydate'], function(){
        var table = layui.table;
        var form=layui.form;
        var laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#start'
        });
        laydate.render({
            elem: '#end'
        });
        form.render();//当表单中元素是后追加进来的时候，或者radio和select显示不出来的时候，就调用这语句，重新渲染表单
        //第一个实例
        var tableIns= table.render({
            id:"dish-table",
            elem: '#dish-table'
            //,height: 312
            ,url: 'table.html?act=list' //数据接口
            ,page: true //开启分页
            ,limit:2
            ,limits: [2, 4, 6]
            //,page:{layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']} //自定义分页布局
            ,toolbar: '#toolbarDemo'
            ,cols: [[ //表头
                {field: 'ck', title: '', width:80, type:'checkbox'}
                ,{field: 'id', title: 'ID', width:80, sort: true}
                ,{field: 'name', title: '餐桌名', width:80}
                ,{field: 'status', title: '状态', width:80 ,templet: function(d){
                    return d.status==1?'<span class="layui-badge layui-bg-orange">预定</span>':'<span class="layui-badge layui-bg-blue">空闲</span>'
                }}
                ,{field: 'orderTime', title: '预定时间', width:180}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 180}
            ]]
        });
        //toolbar头部工具栏
        table.on('toolbar(dish-table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 1,
                         area: ['400px', '300px'],
                        content: $("#table-edit-layer").html() //这里content是一个普通的String
                        ,btn: ['提交', '取消']
                        ,yes: function(index, layero){
                            $.ajax({
                                url:"table.html?act=add",
                                method:"post",
                                data:$("#table-edit-form").serialize(),
                                success:function (result) {
                                    if(result.status){
                                        tableIns.reload()
                                        layer.close(index)
                                    }else{
                                        layer.msg(result.message);
                                    }
                                }
                            })
                        }
                        ,btn2: function(index, layero){
                            layer.close(index)
                        }
                    });
                    break;
                case 'delete':
                    if(checkStatus.data.length>0){
                        layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
                            var ids=new Array();
                            $.each(checkStatus.data,function(i,obj){
                                ids.push(obj.id);
                            })
                            $.ajax({
                                url:"table.html?act=delete",
                                method:'post',
                                data:'ids='+ids,
                                success:function(result){
                                    if(result.status){
                                        tableIns.reload()
                                        layer.close(index);
                                    }
                                }
                            })


                        });
                    }
                    break;
            };
        });
        $("#search-table-btn").click(function(){
            alert(1)
            tableIns.reload( {
                where: {
                    name:$("#name").val(),
                    start:$("#start").val(),
                    end:$("#end").val()
                } //设定异步数据接口的额外参数
            });

        })
        //监听行工具栏
        table.on('tool(dish-table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                   // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 1,
                    area: ['400px', '300px'],
                    content: $("#table-edit-layer").html() //这里content是一个普通的String
                    ,btn: ['提交', '取消']
                    ,success: function(layero, index){
//                        $("#aaa").append('<option value="">请选择一个城市</option>\\n\' +\n' +
//                            '                            \'                    <option value="1">空闲</option>\\n\' +\n' +
//                            '                            \'                    <option value="0">预定</option>\\n\' +')
//                        form.render()
                        form.val("table-edit-form", {
                            "id": data.id // "name": "value"
                            ,"name": data.name
                            ,"status":data.status+"" //radio选中的时候，它不认识数字类型的，必须转换成字符串才能选中
                            ,"status1":data.status
                        })
                    }
                    ,yes: function(index, layero){
                        $.ajax({
                            url:"table.html?act=update",
                            method:"post",
                            data:$("#table-edit-form").serialize(),
                            success:function (result) {
                                if(result.status){
                                    tableIns.reload()
                                    layer.close(index)
                                }else{
                                    layer.msg(result.message);
                                }
                            }
                        })
                    }
                    ,btn2: function(index, layero){
                        layer.close(index)
                    }
                });
            }
        });
    });
</script>
<script type="text/html" id="table-edit-layer">
    <form id="table-edit-form" style="width: 80%" class="layui-form" lay-filter="table-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">餐桌名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入餐桌名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="空闲">
                <input type="radio" name="status" value="0" title="预定">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="status1" lay-verify="" id="aaa">
                </select>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>